<template>
  <transition name="down">
    <div class="message_container" v-if="isShow">
      <div class="m-i">
        <i class="iconfont" :class="style[props.type]"></i>
        <span class="text">{{ message }}</span>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps({
  message: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'warning'
  }
})

type Style = {
  [warning: string]: string
  error: string
  success: string
}

const style: Style = {
  warning: 'icon-warning',
  error: 'icon-error',
  success: 'icon-success'
}
const isShow = ref<boolean>(false)
onMounted(() => {
  isShow.value = true
  setTimeout(() => {
    isShow.value = false
  }, 3000)
})
</script>

<style scoped lang="scss">
.down-enter-active,
.down-leave-active {
  transition: all 0.4s ease-in-out;
}

.down-enter-from,
.down-leave-to {
  transform: translateY(-200%);
  opacity: 0;
}

.message_container {
  left: 0;
  width: 100vw;
  height: 40px;
  position: fixed;
  top: 10px;
  z-index: 999;
  display: flex;
  justify-content: center;

  .m-i {
    border-radius: 2px;
    background-color: $gray-10;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 10%;
    span {
      padding: 0 5px;
    }
  }

  .icon-warning {
    color: $warning-color;
  }
  .icon-error {
    color: $error-color;
  }
  .icon-success {
    color: $success-color;
  }
}
</style>
